<template>
	<page-meta :page-style="'overflow:' + (isShow ? 'hidden' : 'visible')"></page-meta>
	<div class="bg">
		<uni-nav-bar class="get-nav-bar" :fixed="true" color="#fff" background-color="#1E60FF" status-bar left-icon="left" title="一键加油" :border="false" @clickLeft="back" />
		<view class="container">
			<div class="container-box" :style="{ 'padding-bottom': setBottomH + 'px' }">
				<!-- <box-frame>
					<div class="top-brand">
						<image class="logo" :src="shopInfo.shopLogo" mode="aspectFill"></image>
						<view class="top-brand-info">
							<view class="top-brand-info__name">{{ shopInfo.shopName }}</view>
							<view class="top-brand-info__desc">{{ shopInfo.shopAddress }}</view>
						</view>
					</div>
				</box-frame> -->
				<!-- 请选择油号 -->
				<box-frame>
					<view class="choose">
						<div class="box-frame-title">请选择油号</div>
						<div class="choose-label">
							<div class="choose-item" v-for="(item, index) in oilList" :key="index">
								<div class="items choose-item-label">
									<div class="text">{{ item.categoryName }}</div>
								</div>
								<div
									class="items choose-item-num"
									:class="{ active: oilNo === val.productId }"
									v-for="(val, k) in item.petrolList"
									:key="k"
									@click="handleChooseOil(val.productId, val)"
								>
									<div class="model">{{ val.productName }}</div>
									<div class="price">{{ val.price }}/{{ val.buyUnit }}</div>
								</div>
							</div>
						</div>
					</view>
					<!-- 请选择油枪 -->
					<view class="choose" v-if="oilNoItem">
						<div class="box-frame-title nozzle-title">请选择油枪</div>
						<div class="choose-label nozzle">
							<div class="items choose-item-num" v-for="(item, index) in oilNoItem" :key="index" :class="{ active: nozzleNo === item.id }" @click="handleChooseNozzle(item.id)">
								<div class="model">
									<text class="num">{{ item.attrName }}</text>
									<!-- <text class="text">号枪</text> -->
								</div>
							</div>
						</div>
					</view>
				</box-frame>
				<!-- 选择或输入金额 -->
				<box-frame>
					<div class="amount">
						<view @click="handleYuan">
							<uni-easyinput
								disabled
								ConfirmType="done"
								:trim="true"
								:value="amount"
								:maxlength="10"
								symbol="¥"
								v-model="amount"
								type="digit"
								symbolRight="元"
								placeholder="在这里输入加油金额（元）"
							/>
						</view>
						<div class="amount-list">
							<div class="amount-item" v-for="(item, index) in amountList" :key="index" @click="handleChooseAmount(item)" :class="{ active: amount == item }">
								<view class="amount-item__text">
									<text class="amount-item__text--symbol">¥</text>
									{{ item }}
								</view>
							</div>
						</div>
					</div>
				</box-frame>
				<!-- 优惠券信息 -->
				<box-frame v-show="petrolOrder.productId">
					<div class="discount">
						<div class="left">
							<uni-tag class="tag" text="优惠" type="error"></uni-tag>
							<text class="text">{{ petrolOrder.discountTypeDesc }}</text>
						</div>
						<div class="right" @click.native="handleChooseDiscount">
							<div class="right-footer">
								<div class="no-discount" v-if="petrolOrder.discountCount <= 0">暂无可用</div>
								<div class="is-choose">
									<!-- <div class="is-choose-text" v-if="petrolOrder.couponId >= 0">已选择</div> -->
									<uni-tag
										v-if="petrolOrder.discountList && petrolOrder.discountCount > 0"
										class="is-choose-tag"
										:text="petrolOrder.discountCount + '张可用'"
										type="error"
									></uni-tag>
								</div>
							</div>
							<uni-icons type="forward" color="#999999"></uni-icons>
						</div>
					</div>
					<!-- 优惠券描述内容 -->
					<div class="discount" v-if="petrolOrder.discountTitle && petrolOrder.discountAmount">
						<div class="left">
							<uni-tag text="直降" type="error"></uni-tag>
							<text class="text">{{ petrolOrder.discountTitle }}</text>
						</div>
						<div class="right" v-if="petrolOrder.discountAmount">
							<div class="right-footer f2">-¥{{ petrolOrder.discountAmount }}元</div>
						</div>
					</div>
				</box-frame>
				<!-- 支付方式 -->
				<box-frame v-show="petrolOrder.productId" class="get-payment">
					<div class="box-frame-title">请选择支付方式</div>
					<div class="discount payment" @click="handleChoosePayment(2)" v-if="petrolOrder.isWxPay === 1">
						<div class="left">
							<div class="icon-box"><uni-icons type="weixin" size="15" color="#fff"></uni-icons></div>
							<text class="text">微信支付</text>
						</div>
						<div class="right"><uni-icons :type="payment === 2 ? 'checkbox-filled' : 'circle'" color="#1E60FF" size="24"></uni-icons></div>
					</div>
					<div class="discount payment balance" @click="handleChoosePayment(0)" v-if="petrolOrder.isBalancePay === 1">
						<div class="left">
							<uni-tag text="余" type="error"></uni-tag>
							<view class="text">
								余额支付
								<text v-show="petrolOrder.memberBalance > -1">（¥{{ petrolOrder.memberBalance }}）</text>
							</view>
						</div>
						<div class="right"><uni-icons :type="payment === 0 ? 'checkbox-filled' : 'circle'" color="#1E60FF" size="24"></uni-icons></div>
					</div>
				</box-frame>
			</div>
		</view>
		<!-- 底部提交 -->
		<div class="footer get-footer" :style="{ 'padding-bottom': safeArea < 30 ? '24rpx' : '40rpx' }">
			<div class="count">
				<div class="label">合计：</div>
				<div class="total-price">
					<div class="amount-price">
						<div class="text">{{ petrolOrder.payCost || 0 }}</div>
						<div class="unit">元</div>
					</div>
					<div v-if="petrolOrder.discountAmount" class="discount">共优惠{{ petrolOrder.discountAmount }}元</div>
				</div>
			</div>
			<div class="pay-btn" @click="fetchPay">确定支付</div>
		</div>

		<!--弹出选择优惠券 -->
		<uni-popup backgroundColor="#F2F2F2" borderRadius="40px 40px 0px 0px;" ref="popup" background-color="#fff" @change="change" @maskClick="fetchPetrolOrderConfirm">
			<view class="popup-discount">
				<view class="popup-discount-header">
					<view class="popup-discount-header--cancel" @click="handleCancelDiscount"><uni-title title="取消" color="#999999" type="h3"></uni-title></view>
					<div class="popup-discount-header--name">选择优惠券</div>
					<!-- <div class="popup-discount-header--close"></div> -->
					<!-- <uni-icons @click="handleCloseDiscount" class="popup-discount-header--close" type="closeempty"
						size="20" color="#cccccc"></uni-icons> -->
					<view class="popup-discount-header--confirm" @click="handleCloseDiscount"><uni-title title="确定" color="#1e60ff" type="h3"></uni-title></view>
				</view>
				<div class="discount-list" v-if="petrolOrder.discountList && petrolOrder.discountList.length > 0">
					<div
						class="discount-list-item"
						v-for="(item, index) in petrolOrder.discountList"
						:key="index"
						@click="handleCheckDiscount(item.couponId)"
						:class="{ active: item.couponId === couponId }"
					>
						<div class="dot-top"></div>
						<div class="dot-bottom"></div>
						<div class="left" :class="{ cash: item.discountType === 1 }">
							<div class="left-corner">{{ item.discountType === 1 ? '代金券' : item.discountType === 2 ? '折扣券' : '折扣卡' }}</div>
							<div class="left-info">
								<div class="num">
									<div class="text">{{ item.discountType == 1 ? item.disCountAmount : (item.discountRate * 10).toFixed(1) }}</div>
									<div class="unit">{{ item.discountType == 1 ? '元' : '折' }}</div>
								</div>
								<div class="desc">{{ item.reachAmountDesc }}</div>
							</div>
						</div>
						<div class="right">
							<div class="right-info">
								<div class="discount-name">{{ item.discountTitle }}</div>
								<div class="time" v-if="item.useStartTime">
									<image class="icon" src="../../static/images/index/icon-time@2x.png" mode=""></image>
									<div class="text">{{ item.useStartTime }}-{{ item.useEndTime }}</div>
								</div>
							</div>
							<div class="check-btn">
								<uni-icons v-if="item.couponId === couponId" type="checkbox-filled" color="#1E60FF" size="19" />
								<uni-icons v-else type="circle" color="#999999" size="19" />
							</div>
						</div>
					</div>
				</div>
			</view>
		</uni-popup>

		<fx-amountInput @change="handleChangeAmount" @keyboardHide="handleUpdateAmount" :isShowss.sync="isShowss" :amount.sync="amount" :confirmText="'确认'"></fx-amountInput>
		<!-- <mono-keyboard :value="amount" :show="true" @change="handleChangeAmount"></mono-keyboard> -->
	</div>
</template>

<script>
import { memberAsset } from '@/api/member.js';
import { shopDetail } from '@/api/shop.js';
import { productCategorySearchPetrolTreeList } from '@/api/product.js';
import { rechargeOrderCreate, rechargeOrderSearchList } from '@/api/recharge-order.js';
import { petrolOrderConfirm, petrolOrderCreate, petrolOrderPay } from '@/api/petrol-order.js';
import { debounce } from '@/utils/common.js';

export default {
	data() {
		return {
			isShowss: false,
			navBarH: null,
			setBottomH: null,
			footerH: null,
			containerBottom: null,
			paymentBottom: null,

			safeArea: null,
			shopInfo: {},
			oilNo: '',
			oilNoItem: '',
			nozzleNo: '',
			amount: '',
			// pnum: '',
			couponId: null,
			payment: 0,
			petrolOrder: {},
			oilList: [],
			amountList: [100, 200, 300, 500],
			emporaryCouponId: null,
			clickToSubmitSure: null
		};
	},
	onShow() {
		this.getShopDetail();
		this.getProductCategorySearchPetrolTreeList();
		this.getMemberAsset();
		uni.hideTabBar();

		uni.getSystemInfo({
			success: (res) => {
				this.safeArea = res.safeAreaInsets.bottom;
			}
		});

		this.reSetDate();
		this.amount = '';
		// this.clickToSubmitSure = debounce(
		// 	e => {
		// 		this.handleUpdateAmount(e);
		// 	},
		// 	2500,
		// 	false
		// );
	},
	watch: {
		payment(oldObj, newObj) {
			console.log(oldObj, newObj);
			this.fetchPetrolOrderConfirm();
		}
		// amount(n, o) {
		// 	if (this.oilNo && this.amount && o && !this.isShowss) {
		// 		this.$modal.loading("加载中", true)
		// 	}
		// }
	},
	onHide() {
		console.log('hide--');
		this.reSetDate();
		this.amount = '';
		console.log(typeof this.amount);
		uni.showTabBar();
	},
	methods: {
		back() {
			uni.showTabBar();
			uni.switchTab({
				url: '/pages/index'
			});
		},
		getMemberAsset() {
			memberAsset().then((res) => {
				if (res.data.balance <= 0) {
					this.payment = 1;
				}
			});
		},
		// 店铺详情
		getShopDetail() {
			shopDetail().then((res) => {
				this.shopInfo = res.data;
			});
		},
		// 油号列表
		getProductCategorySearchPetrolTreeList() {
			productCategorySearchPetrolTreeList().then((res) => {
				this.oilList = res.rows;
			});
		},
		// 选择油号
		handleChooseOil(model, item) {
			this.nozzleNo = '';
			this.oilNoItem = '';
			this.oilNo = model;
			this.oilNoItem = item.attrList ? item.attrList : '';
			console.log(this.oilNoItem);
			this.$nextTick(() => {
				this.fetchPetrolOrderConfirm();
				if (this.amount === '' && !item.attrList) {
					this.isShowss = true;
				}
			});
			if (!uni.getStorageSync('oilNo-sm')) {
				uni.requestSubscribeMessage({
					tmplIds: ['3uMH-imFBoCuECmhm9owkKgbBk7X7ekXBMNp4hMzEOg', '1Ff_-DzvHZmgDbQsU4SzufDtbE0-SF_3GxdgdG9xPow', 'UjwqOCy0B73LMe3Hb8AsKjGgY4EKtVEvDo4lgFDzsDM'],
					success(res) {
						console.log(res);
						uni.setStorageSync('oilNo-sm', true);
					}
				});
			}
		},
		// 选择有枪
		handleChooseNozzle(id) {
			this.nozzleNo = id;
			if (this.amount === '' && this.oilNo) {
				this.isShowss = true;
			}
		},
		// 弹出自定义键盘
		handleYuan() {
			this.isShowss = true;
			console.log(this.isShowss);
		},
		//点击确定获取返回值
		// getnum(e) {
		// 	this.amount = e
		// 	this.$refs.keyboard.closefun()
		// },
		//数字变化时
		// ongetnum(e) {
		// 	this.clickToSubmitSure(e);
		// },
		// 修改金额
		handleChangeAmount(e) {
			console.log(e);
			this.amount = e;
			// this.clickToSubmitSure(e);
		},
		handleUpdateAmount(e) {
			const num = Number(this.amount);
			console.log(this.amount);
			console.log(num >= 0.01 && typeof num === 'number' && !isNaN(num));
			if (this.amount !== '' && this.amount !== null && this.amount != undefined) {
				if (num >= 0.01 && typeof num === 'number' && !isNaN(num)) {
					this.$nextTick(() => {
						this.$modal.loading('加载中', true);
						this.fetchPetrolOrderConfirm();
					});
				} else {
					this.$modal.msg('请输入正确的加油金额');
					this.amount = '';
				}
			}
		},
		// 选择金额
		handleChooseAmount(item) {
			this.amount = item;
			this.$nextTick(() => {
				this.fetchPetrolOrderConfirm();
			});
		},
		// 弹出优惠券
		handleChooseDiscount() {
			this.emporaryCouponId = this.couponId;
			this.$refs.popup.open('bottom');
			if (!uni.getStorageSync('oilNo-discount')) {
				uni.requestSubscribeMessage({
					tmplIds: ['3uMH-imFBoCuECmhm9owkKgbBk7X7ekXBMNp4hMzEOg', '1Ff_-DzvHZmgDbQsU4SzufDtbE0-SF_3GxdgdG9xPow', 'UjwqOCy0B73LMe3Hb8AsKjGgY4EKtVEvDo4lgFDzsDM'],
					success(res) {
						console.log(res);
						uni.setStorageSync('oilNo-discount', true);
					}
				});
			}
		},
		// 关闭弹窗
		handleCancelDiscount() {
			this.couponId = this.emporaryCouponId;
			this.$refs.popup.close();
		},
		// 确认并关闭弹窗
		handleCloseDiscount() {
			this.$refs.popup.close();
			this.fetchPetrolOrderConfirm();
		},
		// 选择优惠券
		handleCheckDiscount(item) {
			// this.couponId = item === this.couponId ? null : item;
			this.couponId = item;
			// this.fetchPetrolOrderConfirm();
		},
		// 根据油号、金额、优惠 结算金额
		fetchPetrolOrderConfirm() {
			if (this.oilNo && this.amount) {
				const data = {
					productId: this.oilNo,
					orderCost: this.amount,
					couponId: this.couponId,
					payWay: this.payment
				};
				data.couponId === null ? delete data.couponId : data.couponId;
				petrolOrderConfirm(data).then((res) => {
					this.petrolOrder = res.data;
					if (res.data.couponId !== null || res.data.coup >= 0) {
						this.couponId = res.data.couponId;
					}
					// res.data.payCost petrolOrder.payCost
					if (res.data.memberBalance <= res.data.payCost) {
						this.payment = 2;
					}

					if (res.data.isBalancePay === 0) {
						this.payment = 2;
					}
					setTimeout(() => {
						this.$modal.closeLoading();
					}, 300);
				});
			}
			// 根据距离底部计算底部边距
			this.getBottomMargin();
		},
		// 根据距离底部计算底部边距
		getBottomMargin() {
			this.$nextTick(() => {
				let systemInfo = wx.getSystemInfoSync();
				let statusHeight = systemInfo.statusBarHeight;
				console.log('systemInfo', systemInfo);

				const query = uni.createSelectorQuery().in(this);
				query
					.select('.get-nav-bar')
					.boundingClientRect((data) => {
						// console.log('navBarH', data);
						this.navBarH = data.height;
					})
					.exec();

				const query2 = uni.createSelectorQuery().in(this);
				query2
					.select('.container')
					.boundingClientRect((conData) => {
						console.log(conData);
						console.log(conData.bottom);
						this.$nextTick(() => {
							this.containerBottom = conData.bottom;
						});
					})
					.exec();

				const query3 = uni.createSelectorQuery().in(this);
				query3
					.select('.get-footer')
					.boundingClientRect((data) => {
						this.footerH = data.height;
					})
					.exec();

				const query4 = uni.createSelectorQuery().in(this);
				query4
					.select('.get-payment')
					.boundingClientRect((val) => {
						this.paymentBottom = val.bottom;
						setTimeout(() => {
							// console.log(this.containerBottom);
							// console.log(this.paymentBottom);
							// console.log(this.navBarH);
							// console.log(statusHeight);
							// console.log(this.footerH);
							// console.log(this.containerBottom - this.paymentBottom +
							// 	(this.navBarH - statusHeight) + 12 < this
							// 	.footerH);
							if (this.containerBottom - this.paymentBottom + (this.navBarH - statusHeight) < this.footerH) {
								this.setBottomH = this.footerH - (this.containerBottom - this.paymentBottom) - 24;
							}
						}, 200);
					})
					.exec();
			});
		},
		//  选择支付方式
		handleChoosePayment(opt) {
			if (opt === 0 && this.petrolOrder.memberBalance < this.petrolOrder.payCost) {
				uni.showToast({
					title: '余额不足请充值',
					icon: 'none'
				});
			} else {
				this.payment = opt;
			}
		},
		// 弹窗变化按钮 (修复ios背景滑动兼容问题)
		change(e) {
			this.isShow = e.show;
			console.log(e);
		},
		// TODO
		fetchRechargeOrderCreate() {
			const searchList = rechargeOrderSearchList();
			console.log(searchList);
		},
		// 支付 TODO
		fetchPay() {
			if (!this.oilNo) {
				uni.showToast({
					title: '请选择油号',
					icon: 'none'
				});
				return false;
			}

			if (this.oilNoItem && !this.nozzleNo) {
				uni.showToast({
					title: '请选择油枪',
					icon: 'none'
				});
				return false;
			}

			if (!this.amount) {
				uni.showToast({
					title: '请输入加油金额',
					icon: 'none'
				});
				return false;
			}

			const data = {
				productId: this.oilNo,
				orderCost: this.amount,
				couponId: this.couponId,
				payWay: this.payment,
				productAttrId: this.nozzleNo
			};
			// 创建订单
			petrolOrderCreate(data)
				.then((res) => {
					const data = {
						orderSn: res.data,
						payWay: this.payment
					};
					if (this.payment === 2) {
						petrolOrderPay(data).then((val) => {
							uni.requestPayment({
								provider: 'wxpay',
								...val.data,
								success: (result) => {
									console.log(result);
									this.$modal.msgSuccess('支付成功');
									setTimeout(() => {
										console.log(res.data);

										this.reSetDate();
										uni.showTabBar();
										this.$tab.redirectTo(`/pages/mine/order/detail?sn=${res.data}`);
									}, 1500);
								},
								fail: (err) => {
									console.log(err);
									this.handlePayError();
								}
							});
						});
					} else if (this.payment === 0) {
						this.$modal.confirm(`确认使用余额支付${this.petrolOrder.payCost}元？`).then((confirmRes) => {
							petrolOrderPay(data)
								.then((val) => {
									console.log(val);
									if (val.code === 0) {
										console.log(val);

										this.$modal.msgSuccess('支付成功');
										setTimeout(() => {
											this.reSetDate();
											uni.showTabBar();
											this.$tab.redirectTo(`/pages/mine/order/detail?sn=${res.data}`);
										}, 1500);
									}
								})
								.catch((err) => {
									console.log(err);
									this.handlePayError();
								});
						});
					} else {
						this.$modal.msgError('请选择支付方式');
					}
				})
				.catch((fails) => {
					console.log(fails);
					this.handlePayError();
				});
		},
		// 支付失败提示
		handlePayError() {
			uni.showModal({
				title: '支付失败',
				content: '支付遇到问题，请尝试重新支付',
				showCancel: false,
				// cancelText: '返回订单',
				confirmText: '重新支付',
				// cancelColor: '##000000',
				confirmColor: '#1E60FF',
				icon: 'fail',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确认');
						this.reSetDate();
					} else if (res.cancel) {
						console.log('用户点击取消');
						this.reSetDate();
						// this.$tab.navigateTo('/pages/mine/order/detail');
					}
				}
			});
		},
		// 重置
		reSetDate() {
			this.navBarH = null;
			this.setBottomH = null;
			this.footerH = null;
			this.containerBottom = null;
			this.paymentBottom = null;
			this.safeArea = null;
			this.shopInfo = {};
			this.oilNo = '';
			this.oilNoItem = '';
			this.nozzleNo = '';
			this.isShowss = false;
			this.amount = '';
			this.couponId = null;
			this.payment = 0;
			this.petrolOrder = {};
			this.oilList = [];
			this.$nextTick(() => {
				this.getShopDetail();
				this.getProductCategorySearchPetrolTreeList();
				this.getMemberAsset();
				// uni.hideTabBar();

				uni.getSystemInfo({
					success: (res) => {
						this.safeArea = res.safeAreaInsets.bottom;
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
.bg {
	background: $uni-page-bg;
	min-height: 100vh;
}

.container {
	padding: 1rpx 24rpx 0;
	line-height: inherit;
	background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
	background-size: 100% 416rpx;
	background-repeat: no-repeat;
	width: 100%;
	// background-attachment: fixed;

	.box-frame-title {
		margin-bottom: 24rpx;
		font-size: 36rpx;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 800;
		color: #111111;
		line-height: 1;
	}

	.top-brand {
		display: flex;

		.logo {
			height: 96rpx;
			width: 96rpx;
			max-width: 96rpx;
			min-width: 96rpx;
			border-radius: 9rpx;
		}

		&-info {
			margin-left: 24rpx;

			&__name {
				margin-top: 0rpx;
				margin-bottom: 0;
				font-size: 34rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #111111;
				line-height: 1;
			}

			&__desc {
				margin-top: 8rpx;
				margin-bottom: 0rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 1.1;
			}
		}
	}

	.choose {
		.choose-item {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;

			&:first-child {
				margin-bottom: 24rpx;
			}

			.items {
				margin-right: 16rpx;
			}

			& > .items:last-child {
				margin-right: 0;
			}

			&-label {
				min-width: 48rpx;
				width: 48rpx;
				height: 120rpx;
				background: #f6f6f6;
				border-radius: 0rpx 16rpx 16rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				.text {
					font-size: 32rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #1e60ff;
				}
			}

			&-num {
				min-width: 186rpx;
				height: 120rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #f6f6f6;
				box-sizing: border-box;

				.model {
					margin-bottom: 8rpx;
					font-size: 40rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #111111;
					line-height: 1;
				}

				.price {
					font-size: 28rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #999999;
					line-height: 1;
				}

				&.active {
					color: #1e60ff;
					border: 2rpx solid #1e60ff;
					background: #eff3ff;

					.model,
					.price {
						color: #1e60ff;
					}
				}
			}
		}

		// 油枪
		.nozzle-title {
			padding-top: 40rpx;
			margin-bottom: 0;
		}

		.nozzle {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.choose-item-num {
				margin-right: 16rpx;
				margin-top: 24rpx;
				width: 150rpx;
				min-width: 150rpx;
				height: 80rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #f6f6f6;
				box-sizing: border-box;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.model {
					margin-bottom: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;

					.num {
						font-size: 37rpx;
					}

					.text {
						font-size: 29rpx;
					}
				}

				&.active {
					color: #1e60ff;
					border: 2rpx solid #1e60ff;
					background: #eff3ff;

					.model {
						color: #1e60ff;
					}
				}
			}
		}
	}

	.amount {
		.uni-easyinput {
			&__content {
				border: 1px solid #f6f6f6 !important;
				background-color: #f6f6f6 !important;
				height: 110rpx;

				.symbol {
					margin-left: 36rpx;
					font-size: 40rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #111111;

					&-active {
						color: #1e60ff;
					}
				}

				.symbol-right {
					margin-right: 36rpx;
					font-size: 40rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
				}

				&-input {
					padding-left: 24rpx !important;
					font-size: 40rpx !important;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #1e60ff;
					height: 100% !important;
					border-radius: 16rpx;
					box-sizing: border-box;
				}
			}
		}

		&-list {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
		}

		&-item {
			margin-right: 16rpx;
			width: 152rpx;
			height: 80rpx;
			background: #eff3ff;
			border-radius: 16rpx;
			border: 2rpx solid #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;

			&__text {
				font-size: 40rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #111111;

				&--symbol {
					font-size: 28rpx;
				}
			}

			&.active {
				background: #eff3ff;
				border: 2rpx solid #1e60ff;

				.amount-item__text {
					color: #1e60ff;
				}
			}
		}
	}

	.discount {
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;

		&:last-child {
			margin-bottom: 0;
		}

		.left {
			display: flex;
			align-items: center;

			.uni-tag {
				box-sizing: border-box;
				padding: 4rpx 10rpx !important;
				display: flex;
				justify-content: center;
				font-size: 24rpx !important;
				font-weight: 500 !important;
				line-height: 1 !important;
			}

			.text {
				margin-left: 16rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				line-height: 1;
			}
		}

		.right {
			display: flex;
			align-items: center;

			&-footer {
				margin-right: 5rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff403c;
				line-height: 1;

				&.f2 {
					margin-right: 9rpx;
				}

				.no-discount {
					color: #999999;
				}

				.is-choose {
					display: flex;
					align-items: center;

					&-text {
						margin-right: 10rpx;
					}

					&-tag {
						.uni-tag {
							box-sizing: border-box;
							padding: 4rpx 10rpx !important;
							display: flex;
							justify-content: center;
							font-size: 24rpx !important;
							font-weight: 500 !important;
							line-height: 1 !important;
						}
					}
				}
			}
		}
	}

	.payment {
		.icon-box {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #28c445;
			border-radius: 4px;
		}

		&.balance .uni-tag {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #1e60ff;
			font-size: 26rpx;
			border-radius: 4px;
			border: 1px solid #1e60ff;
			color: #fff;
			font-weight: 600;
		}
	}
}

.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	padding-bottom: 0;
	font-size: 28rpx;
	font-family: PingFang-SC-Heavy, PingFang-SC;
	font-weight: 800;
	color: #111111;
	background-color: #fff;

	// @supports (bottom: constant(safe-area-inset-bottom)) {
	// 	padding-bottom: calc(constant(safe-area-inset-bottom)+ 20rpx);

	// }

	// @supports (bottom: env(safe-area-inset-bottom)) {
	// 	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	// }

	.count {
		display: flex;
		align-items: center;

		.label {
			font-size: 28rpx;
			font-family: PingFang-SC-Heavy, PingFang-SC;
			font-weight: 800;
			color: #111111;
			line-height: 1;
		}

		.total-price {
			.amount-price {
				display: flex;
				align-items: center;

				.text {
					margin-right: 8rpx;
					font-size: 56rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #ff403c;
					line-height: 1;
				}

				.unit {
					font-size: 28rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					line-height: 1;
					color: #111111;
				}
			}

			.discount {
				margin-top: 8rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff403c;
				line-height: 1;
			}
		}
	}

	.pay-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 240rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #00e4ff 0%, #1e60ff 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 1;
	}
}

.popup-discount {
	height: 75vh;
	background: #f2f2f2;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	overflow: hidden;

	&-header {
		position: relative;
		height: 100rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&--name {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #111111;
			line-height: 1;
			text-align: center;
		}

		&--confirm {
			margin-right: 30rpx;
			color: #1e60ff;
		}

		&--cancel {
			margin-left: 30rpx;
			color: #999;
		}

		&--close {
			position: absolute;
			top: 34rpx;
			right: 26rpx;
			bottom: 0;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.discount-list {
		height: 89%;
		overflow-y: auto;
		background-color: #f2f2f2;

		.discount-list-item {
			position: relative;
			display: flex;
			width: 702rpx;
			height: 176rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			background: #fff;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
			border-radius: 20rpx;
			border: 3rpx solid #f2f2f2;

			&.active {
				border: 3rpx solid #1e60ff;

				.dot-top {
					border: 3rpx solid #1e60ff;
					border-top: 0;
				}

				.dot-bottom {
					border: 3rpx solid #1e60ff;
					border-bottom: 0;
				}
			}

			.dot-top {
				position: absolute;
				top: -1rpx;
				left: 266rpx;
				width: 28rpx;
				height: 14rpx;
				border-radius: 0 0px 14rpx 14rpx;
				line-height: 14rpx;
				background-color: #f2f2f2;
				z-index: 1;
			}

			.dot-bottom {
				position: absolute;
				bottom: -1rpx;
				left: 266rpx;
				width: 28rpx;
				height: 14rpx;
				border-radius: 14rpx 14rpx 0 0px;
				line-height: 14rpx;
				background-color: #f2f2f2;
				z-index: 1;
			}

			.left {
				position: relative;
				min-width: 280rpx;
				height: 100%;
				background: linear-gradient(138deg, #ffe15b 0%, #ff9344 100%);
				border-radius: 17rpx 0rpx 0rpx 17rpx;
				overflow: hidden;

				&.cash {
					background: linear-gradient(138deg, #ff5bc4 0%, #ff4b44 100%);

					.left-corner {
						background: #ff4b44;
					}

					.desc {
						color: #ff4b44;
					}
				}

				&-corner {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 168rpx;
					height: 35rpx;
					background: #ff9344;
					color: #fff;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 200;
					line-height: 1;
					transform: rotate(-45deg);
					position: absolute;
					top: 7px;
					left: -52rpx;
				}
			}

			.left-info {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				height: 100%;

				.num {
					display: flex;
					justify-content: center;
					align-items: baseline;
					margin-bottom: 10rpx;

					.text {
						font-size: 80rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #ffffff;
						line-height: 1;
					}

					.unit {
						font-size: 24rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #ffffff;
						line-height: 1;
					}
				}

				.desc {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 4rpx 12rpx;
					background: #ffffff;
					border-radius: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ff9344;
					line-height: 1;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 15rpx;
				width: 442rpx;
				height: 100%;

				&-info {
					.discount-name {
						margin-bottom: 16rpx;
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						line-height: 1.2;
					}

					.time {
						display: flex;
						align-items: center;

						.icon {
							width: 24rpx;
							height: 24rpx;
						}

						.text {
							margin-left: 8rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 24rpx;
						}
					}
				}
			}
		}
	}
}
</style>
